<template>
    <div class="sys-tab">
        <div class="tab-bars-ground">
            <div class="tab-bar" 
                @click="changeTab(tab.name)"
                :class="layouts.getActiveTab===tab.name ? 'active': ''" 
                v-for="(tab, index) in layouts.getSysTabs">
                <span>{{ tab.title }}</span>
                <i v-show="layouts.getSysTabs.length>1" @click.stop="closeTab(tab.name)" class="bi bi-x"></i>
            </div>
            <div class="add-tab">                
                <cb-button class="item" @click="addTab()">
                    <i class="bi bi-plus"></i>
                </cb-button>
            </div>
        </div>
        <div class="tab-panels">
            <div class="panel-contoll">
                <cb-button no-hover-color class="item">
                    <i class="bi bi-arrow-left"></i>
                </cb-button>
                <cb-button no-hover-color class="item">
                    <i class="bi bi-arrow-right"></i>
                </cb-button>
                <div class="right-tools">
                    <cb-button no-hover-color class="item">
                        <i class="bi bi-zoom-in"></i>
                    </cb-button>
                    <cb-button no-hover-color class="item">
                        <i class="bi bi-zoom-out"></i>
                    </cb-button>
                    <cb-button no-hover-color class="item">
                        <i class="bi bi-stars"></i>
                    </cb-button>       
                    <cb-button no-hover-color class="item">
                        <i class="bi bi-speedometer2"></i>
                    </cb-button>                    
                    <cb-button no-hover-color class="item">
                        <i class="bi bi-three-dots"></i>
                    </cb-button>
                </div>
            </div>
            <router-view v-slot="{ Component }">
                <keep-alive>
                <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>
    </div>
</template>

<script setup>
import { randomId } from '@frontend/utils/utils'
import { useLayoutStore } from '@frontend/stores/pinia/layoutStore'
import { useRouter } from 'vue-router';

const props = defineProps(['tabs'])

const $route = useRouter()
const layouts = useLayoutStore()

function changeTab(name){
    layouts.setActiveTab( name )
    const vo = layouts.getActiveTabVo
    $route.push({path: vo.route, query: vo.args})
}
function addTab(){
    const name = 'new-' + randomId()
    layouts.appendTab({
        title: '新建tab页',
        name: name,
        args: {},
        route: '/empty',
        icon: '',
        component: null
    })
    layouts.setActiveTab( name )
    $route.push({path: '/empty'})
}

function closeTab(name){
    layouts.closeTab(name)
}

</script>

<style lang="scss">
.sys-tab{
    position:relative;
    width:100%;
    height:100%;
    .tab-bars-ground{
        position:absolute;
        display: flex;
        top:-30px;
        z-index:15;
        line-height:30px;
        padding:0 10px;
        *{
            -webkit-app-region: no-drag;
        }
        .tab-bar{
            position: relative;
            margin-left:16px;
            padding: 0 20px;
            border-radius: 8px 8px 0 0;
            text-align: left;
            min-width: 150px;
            font-size:0.9rem;
            color:$ft-color;
            transition-duration: 0.3s;
            .bi-x{
                position:absolute;
                display: none;
                right:3px;
                top:3px;
                line-height: 10px;
            }
            cursor: pointer;
            &::after,
            &::before{  
                position: absolute;
                right: 0;
                bottom:0;
                content: '';
                width: 12px;
                height: 12px;
                border-radius: 100%;
                transition-duration: 0.3s;
                z-index: 10;
                clip-path: inset(50% 0 0 50%);
            }
            &::before{
                left:-12px;
            }
            &::after{    
                right: -12px;
                transform: rotate(90deg);
            }
            &.active{
                color: $ft-act-color;
                background:$wk-color;
                &::after,
                &::before{                    
                    box-shadow: 0 0 0 6px $wk-color;
                }
            }
            &:hover{
                color: $ft-act-color;
                .bi-x{
                    display: unset;
                }
                &:not(.active){
                    background:$hover-bg-color;
                    &::after,
                    &::before{                    
                        box-shadow: 0 0 0 8px $hover-bg-color;
                    }
                }
            }
        }

        .add-tab{
            padding: 0;
            margin-left: 10px;
            height:28px;
            .item{
                font-size: 0.8rem;
            }
        }
    }
    .tab-panels{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        overflow: auto;
        overflow: hidden;
        .tab-panel{
            display: none;
            &.active{
                display: block;
            }
        }
        .panel-contoll{
            top:0;
            left:0;
            right:0;
            height:1.3rem;
            // background-color: red;
            .right-tools{
                float : right;
                margin-right:20px;
            }
        }
        .muti-panel{
            height: calc(100% - 1.3rem)
        }
    }
}
</style>